<template>
    <div>
        <div>
            <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div style="width: 336px;height: 100px;margin: 30px auto;">
            <span class="p1">重设密码</span><br>
            <span class="p2">请输入 {{ tel }} 收到的短信验证码，以完成安全验证~</span>
        </div>
        <div style="margin-top:70px;position: relative;">
            <input type="text" v-model="code" placeholder="请输入验证码" class="ipt2">
            <button class="btn1" @click="getCode" v-show="flag"> 获取验证码 </button>
            <button class="btn1" v-show="!flag">{{ num }}秒后</button>
            <button class="btn2" @click="next">下一步</button>
        </div>
    </div>
</template>

<script setup>
import {ref,inject} from 'vue'
import {useRouter} from 'vue-router'
import { showToast } from 'vant';
const router = useRouter()
const onClickLeft = () => history.back();
const tel = sessionStorage.getItem('tel')
const code = ref('')
let flag = ref(true);
let num = ref(60);
const axios= inject('$axios')
const getCode = async () => {
    flag.value = false;
    let timer = setInterval(async () => {
        num.value--;
        if (num.value === 55) {
            showToast('已发送验证码');
            let res = await axios.get(`http://localhost:3000/code`, { params: { phone: tel } })
        }
        if (num.value == 0) {
            clearInterval(timer)
            num.value = 60
            flag.value = true
        }
    }, 1000)
}
const next = () => {
    if(code.value != 0){
        router.push('/newpwd')
    }else{
        showToast('请输入验证码')
        return
    }
    
}
</script>

<style lang="scss" scoped>
.p1 {
    font-size: 30px;
    font-weight: 500;

}

.p2 {
    font-size: 14px;
    color: #999;

}

.ipt1 {
    width: 100%;
    height: 70px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid rgb(204, 199, 199);
    font-size: 18px;
    padding-left: 20px;
}

.ipt2 {
    width: 100%;
    height: 70px;
    border-left: none;
    border-right: none;
    border-top: 1px solid rgb(204, 199, 199);
    border-bottom: 1px solid rgb(204, 199, 199);
    font-size: 18px;
    padding-left: 20px;
}

.btn1 {
    width: 120px;
    height: 35px;
    background-color: rgb(255, 255, 255);
    border:none;
    position: absolute;
    top: 20px;
    right: 15px;
    color: #999;
}

.btn2 {
    width: 300px;
    height: 50px;
    border: none;
    background-color: rgb(36, 153, 248);
    border-radius: 10px;
    color: white;
    margin-top: 30px;
    margin-left: 45px;
    font-size: 18px
}
</style>